/**
 * Description
 *
 * Creation Date 27/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { is, fromJS} from 'immutable';
import { categories } from '../../api/index';

export default class BrandList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isFetching: false,
			brandList: []
		}
	}

	componentDidMount() {
		categories('brand').then(res => {
			this.setState({ brandList: res.data})
		})
	}

	componentWillUpdate(nextProps, nextState) {
		if(this.state !== nextState) {
			this.setState({isFetching: true})
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		if(nextState.isFetching) {
			return false;
		}
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		return (
			<div className="brand-container">
				{
					this.state.brandList && this.state.brandList.length > 0 && this.state.brandList.map((item, index) =>
						<Link to={"/category?brandId=" + item.brand_id + "&name=" + encodeURIComponent(item.brand_name)} key={index}><img src={item.brand_image} alt=""/></Link>
					)
				}
			</div>
		)
	}
}